<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      width="80%"
      align-center
      :show-close="false"
      destroy-on-close
      draggable
    >
      <template #header="{ close }">
        <div class="dialog-header flex justify-between items-center">
          <div>评审通知</div>
          <el-icon class="el-icon--left cursor-pointer" @click="close"
            ><CircleCloseFilled color="#fff"
          /></el-icon>
        </div>
      </template>
      <div class="m-[10px] bg-white pb-[10px]">
        <el-table :data="state.tableData" class="w-full" stripe v-loading="state.loading">
          <el-table-column prop="title" label="标题">
            <template #default="{ row }">
              <el-link type="primary" @click="handleShow(row.id)">{{ row.title }}</el-link>
            </template>
          </el-table-column>

          <el-table-column prop="sendTime" label="发送时间" />
          <el-table-column label="发送状态">
            <template #default="{ row }">
              <CustomLabel
                :map="{
                  0: '发送失败',
                  1: '发送成功',
                }"
                :mapKey="row.state"
            /></template>
          </el-table-column>
        </el-table>
        <div class="mt-[20px] flex justify-end">
          <el-pagination
            v-bind="state.pagination"
            @update:current-page="state.currentChange"
            @update:page-size="state.sizeChange"
          />
        </div>
      </div>
    </el-dialog>
    <ViewMessageModal ref="viewMessageModalRef" />
  </div>
</template>

<script setup>
import useTable from "@/hooks/useTable";
import CustomLabel from "@/views/project/components/CustomLabel.vue";
import ViewMessageModal from "./ViewMessageModal.vue";
import { getMessageList } from "@/api/project/xj/xmps";
const dialogVisible = ref(false);
const viewMessageModalRef = ref();
const state = ref({
  loading: false,
  pagination: null,
  sizeChange: null,
  currentChange: null,
  tableData: [],
  search: null,
});
//查看
const view = () => {
  dialogVisible.value = true;
  state.value = useTable((pagin) =>
    getMessageList({
      pageNum: pagin.pageNum,
      pageSize: pagin.pageSize,
    })
  );
};
//点击标题
const handleShow = (id) => {
  viewMessageModalRef.value.view(id);
};
defineExpose({ view });
</script>

<style scoped lang="scss">
@import url("@/views/project/index.scss");
</style>
